<template>
    <el-card class="mb-20" shadow="hover">
        <template #header>
            <span>出库单申请</span>
            <el-button type="primary" icon="el-icon-plus" @click="addItem">新增物品</el-button>
        </template>
        <el-form :model="form" label-width="120px">
            <el-form-item label="仓库名称">
                <el-select v-model="form.warehouseName" placeholder="请选择仓库">
                    <el-option label="仓库A" value="warehouseA"></el-option>
                    <el-option label="仓库B" value="warehouseB"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="领用部门">
                <el-input v-model="form.department" placeholder="请输入领用部门"></el-input>
            </el-form-item>
            <el-form-item label="出库物品">
                <el-table :data="form.items" stripe border style="width: 100%">
                    <el-table-column prop="name" label="物品名称"></el-table-column>
                    <el-table-column prop="quantity" label="数量">
                        <template #default="scope">
                            <el-input-number v-model="scope.row.quantity" :min="1"></el-input-number>
                        </template>
                    </el-table-column>
                    <el-table-column prop="unit" label="单位"></el-table-column>
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button type="danger" icon="el-icon-delete" @click="deleteItem(scope.$index)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>
            <el-form-item label="备注">
                <el-input type="textarea" v-model="form.remark" placeholder="请输入备注信息"></el-input>
            </el-form-item>
            <div class="text-right">
                <el-button type="primary" @click="submitApply">提交申请</el-button>
                <el-button @click="resetForm">重置</el-button>
            </div>
        </el-form>
    </el-card>
</template>

<script>
export default {
    data() {
        return {
            form: {
                warehouseName: '',
                department: '',
                items: [
                    { name: '', quantity: 1, unit: '' }
                ],
                remark: ''
            }
        };
    },
    methods: {
        addItem() {
            this.form.items.push({ name: '', quantity: 1, unit: '' });
        },
        deleteItem(index) {
            this.$confirm('确认删除该物品吗？', '提示', {
                type: 'warning'
            }).then(() => {
                this.form.items.splice(index, 1);
            });
        },
        submitApply() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.$message.success('出库单申请提交成功');
                    this.resetForm();
                } else {
                    this.$message.error('请完善表单信息');
                }
            });
        },
        resetForm() {
            this.$refs.form.resetFields();
            this.form.items = [
                { name: '', quantity: 1, unit: '' }
            ];
        }
    }
};
</script>

<style scoped>
.mb-20 {
    margin-bottom: 20px;
}
.text-right {
    text-align: right;
}
</style>